<template>
    <div>
        <!-- 跳转首页 -->
        <section class="home">
            <span @mouseenter="chang" @mouseleave="change"><a-icon type="home" /><router-link to="/index" style="margin-left:5px" :class="green?'mygreen':'mychang'">首页</router-link></span>
            &nbsp;&nbsp;/&nbsp;&nbsp;<span>视频详情</span>
        </section>
        <!-- 信息 -->
        <section class="information">
            <div class="informationImg">
                <img :src="img" style="width:330px;height:200px">
            </div>
            <div class="informationText">
                <h3 class="courseTitle" style="font-size: 24px">{{courseTitle}}</h3>
                <p style="color: #999999;margin-bottom: 5px">累计{{participationsCount}}学习<a-rate style="margin-left: 10px" :value="myscore" disabled /></p>
                <div v-if="iFree=='1'">
                    <h3 class="isFree">
                        <span style="color: rgb(0,207,140);font-size: 24px;font-weight: 520">免费</span>
                    </h3>
                    <button class="free" style="margin-top: 30px;">立即观看</button>
                </div>
                <div v-else-if="isDiscount=='0'">
                    <h3 class="isFree">
                        <span style="color: red;">&yen;{{coursePrice}}</span>
                    </h3>
                    <button class="free" style="background-color:#ff8000;margin-top:30px">购买</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="free" style="margin-top:30px">加入购物车</button>
                </div>
                <div v-else>
                    <h3 class="isFree">
                        <span style="color: black;font-size: 24px">&yen;{{discountPrice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;text-decoration: line-through;font-size:14px ">&yen;{{coursePrice}}</span>
                    </h3>
                    <div  class="preferential">限时钜惠</div>
                    <button  class="free" style="background-color:#ff8000">购买</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="free">加入购物车</button>
                </div>
            </div>
            <button class="collection">
                <svg t="1630381710816" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4250" width="16" height="16"><path d="M1066.676944 101.025891A351.539301 351.539301 0 0 0 584.680751 90.428552a351.539301 351.539301 0 0 0-481.996194 10.597339 344.230792 344.230792 0 0 0 0 490.035554l403.795143 400.140888a109.627641 109.627641 0 0 0 156.402101 0l403.795143-399.775463a344.230792 344.230792 0 0 0 0-490.400979z m-52.255842 438.510563L610.625959 939.677342a36.542547 36.542547 0 0 1-51.890417 0L154.574973 539.536454a271.876549 271.876549 0 0 1 0-386.985572A277.357931 277.357931 0 0 1 534.982887 146.338649L584.680751 189.093429 634.013189 146.338649a277.357931 277.357931 0 0 1 380.407913 8.03936 271.876549 271.876549 0 0 1 0 385.158445z" fill="#999999" p-id="4251"></path><path d="M338.018559 182.881196A155.305824 155.305824 0 0 0 182.712735 338.18702a18.271273 18.271273 0 0 0 36.542546 0A118.763277 118.763277 0 0 1 338.018559 219.423743a18.271273 18.271273 0 0 0 0-36.542547z" fill="#999999" p-id="4252"></path></svg>
                收藏
            </button>
        </section>
        <!-- 文本 -->
        <a-tabs default-active-key="1" @change="callback" id="myTabContent">
            <a-tab-pane key="1" tab="课堂描述" v-html="courseDetail" id="home"></a-tab-pane>
            <a-tab-pane key="2" tab="目录" force-render>
                <ul v-for="(item,index) in sections" :key="item.sectionId" id="directory">
                    <h3>
                        {{index+1}}.&nbsp;{{item.sectionName}}
                        <a-button type="primary" style="float: right;background-color:#2db7f5;border: 0"><a-icon type="cloud-download" />下载</a-button>
                    </h3>
                    <li v-for="(a,b) in item.subSections" :key="a.sectionId" >
                        <p @mouseenter="enter(a.sectionId)" @mouseleave="leave">
                            {{index+1}}-{{b+1}}&nbsp;&nbsp;{{a.sectionName}}
                            <a-icon :class="flag==a.sectionId?'appear':'disappear'" type="right-circle" style="float:right;margin-top:17px;margin-right:15px"/>
                            <span v-if="iFree=='1'" :class="flag==a.sectionId?'disappear':'appear'" style="float:right;color:#53e0af;margin-right:7.5px">观看</span>
                            <span v-else :class="flag==a.sectionId?'disappear':'appear'" style="float:right;color:#53e0af;margin-right:7.5px">试看</span>
                        </p>
                    </li>
                </ul>
            </a-tab-pane>
            <a-tab-pane key="3" tab="评论" id="comments">
                <p>评论</p>
                <span>
                    <a-rate v-model="value" :tooltips="desc" />
                    <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                </span>
                <a-textarea placeholder="请发表您对课程的评论" :rows="6" style="margin-top: 10px"/>
                <a-button type="primary" style="float: right;margin-top: 10px;background-color: #22db9b;border: 0">发表评论</a-button>
                <div style="clear: both"></div>
                <br>
                <div style="border-bottom: 1px solid #e8e8e8"></div>
                <div style="margin-top: 20px;border-bottom: 1px solid #e8e8e8;padding-bottom: 10px" v-for="(item) in comments" :key="item.commentId">
                    <a-avatar icon="user" />
                    <span style="margin-left: 10px">{{item.user.nickname}}</span>
                    <a-rate :default-value="item.score" disabled style="float: right;margin-right: 5px"/>
                    <p style="margin-left: 40px;margin-top: 10px">{{item.commentContent}}</p>
                    <p style="margin-top: 10px;float: right">{{item.createdTime}}<span style="margin-left: 10px;margin-right: 5px">回复</span></p>
                    <div style="clear: both"></div>
                </div>
            </a-tab-pane>
        </a-tabs>

    </div>
</template>

<script>
    export default {
        name: "MyCourse",
        data(){
            return {
                img:'',
                courseTitle:'',
                participationsCount:'',
                iFree:'',
                isDiscount:'',
                coursePrice:'',
                discountPrice:'',
                courseDetail:'',
                sections:[],
                green:false,
                flag:'',
                value: 5,
                desc: ['差', '一般', '中等', '好', '非常好'],
                comments:'',
                myscore:0
            }
        },
        created(){
            let course = this.$route.query.course
            this.$axios.get(`http://wkt.myhope365.com/pc/course/detail/${course}`).then(res=>{
                this.img = res.data.data.coverFileUrl;
                this.courseTitle = res.data.data.courseTitle;
                this.participationsCount = res.data.data.participationsCount;
                this.iFree = res.data.data.isFree;
                this.isDiscount = res.data.data.isDiscount;
                this.coursePrice = res.data.data.coursePrice;
                this.discountPrice = res.data.data.discountPrice;
                this.courseDetail = res.data.data.courseDetail;
                this.sections = res.data.data.sections;
                this.myscore = Math.round(Number(res.data.score))
                // console.log(this.myscore)
            }).catch(err=>{
                console.log(err);
            })
            this.$axios.get(`http://wkt.myhope365.com/pc/comment/commentList/course/${course}?pageNum=2&pageSize=10`).then(res => {
                // console.log(res);
                this.comments = res.data.rows
                // console.log(this.comments)
            }).catch(err=>{
                console.log(err);
            })

        },
        methods: {
            callback(key) {
                console.log(key);
            },
            chang(){
                this.green = true
            },
            change(){
                this.green = false
            },
            enter(data){
                this.flag = data
            },
            leave(){
                this.flag = false
            }
        },
    }
</script>

<style scoped>
    .home {
        margin: auto;
        max-width: 1200px;
        min-width: 1200px;
        color: #9a9a9a;
    }
    /deep/.mychang {
        color: #9a9a9a;
    }
    /deep/.mygreen {
        color: #53e0af;
    }
    .home>span:hover {
        color: #53e0af;
    }
    /* 信息 */
    .information {
        margin: auto;
        max-width: 1200px;
        min-width: 1200px;
        padding: 20px;
        height: 270px;
        background-color: white;
    }
    .information>div {
        float: left;
    }
    .information::after {
        content: "";
        display: block;
        clear: both;
    }
    .courseTitle {
        margin-top: 0;
    }
    .informationText {
        margin-left: 50px;
    }
    .informationText p {
        padding-top: 10px;
    }
    .informationText .free {
        margin-top: 10px;
        border: 0;
        width: 160px;
        height: 45px;
        background-color: #00cfb0;
        color: white;
        line-height: 45px;
        font-size: 18px;
    }
    .preferential {
        width: 65px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fa8c16;
        background: #fff7e6;
        border:1px solid #ffd591;
    }
    .collection>svg {
        margin-top: 7px;
        vertical-align: top;
    }
    .collection {
        float: right;
        width: 110px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #999999;
        background-color: white;
    }
    .collection:hover {
        background-color: white;
    }
    /*文本*/
    /deep/.ant-tabs {
        margin: 20px auto 0px;
        max-width: 1200px;
        min-width: 1200px;
        background-color: white;
    }
    #myTabContent {
        padding: 30px;
    }
    #directory h3 {
        font-size: 22px;
    }
    #directory h3,
    #directory p{
        content: "";
        display: block;
        clear: both;
    }
    #directory p{
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        background-color: #f2f2f2;
        text-indent: 2em;
    }
    #directory p:hover {
        color: rgb(0,207,140);
    }

    #directory>h3>p:first-child {
        margin-top: 30px;
    }
    .appear {
        display: none;
    }
    .disappear {
        display: block;
    }
</style>